<template>
	<view class="uwo-group" :style="{ marginTop: `${top}px` }">
		<slot name="title">
			<view v-if="title" class="uwo-group__title">
				<text class="uwo-group__title-text">{{ title }}</text>
			</view>
		</slot>
		<view class="uwo-group__content" :style="styleObj">
			<slot />
		</view>
	</view>
</template>
<script>
/**
 * Group 分组
 * @description 表单字段分组
 * @tutorial https://ext.dcloud.net.cn/plugin?id=22677
 * @property {String} title 主标题
 * @property {Number} top 顶部间隔
 * @property {Number} padding 内容间隔
 * @property {String} bgcolor 自定义背景色
 */
export default {
	name: 'uwoGroup',
	props: {
		title: {
			type: String,
			default: ''
		},
		top: {
			type: Number,
			default: 0
		},
		padding: {
			type: Number,
			default: 10
		},
		bgcolor: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	computed: {
		styleObj() {
			const style = { padding: `${this.padding}px` };
			if (this.bgcolor) {
				style['background-color'] = this.bgcolor;
			}
			return style;
		}
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
$bg-color: var(--uwo-bg-color, #ffffff);
$bg-color-grey: var(--uwo-bg-color-second, #f3f3f3);
$font-size: var(--uwo-font-size-m, 16px);
.uwo-group {
	&__title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		height: 40px;
		background-color: $bg-color-grey;
		font-weight: normal;
		&-text {
			color: #666;
			font-size: $font-size;
		}
	}
	&__content {
		background-color: $bg-color;
	}
}
</style>
